<template>
<div class="dy-main EAccountOpenSucces">
  <div class="dy-header">
    <x-header :right-options="{showMore: false}"  :left-options="{backText: '',preventGoBack: true}" @on-click-more="showMenus = true" @on-click-back="back">开户成功</x-header>
  </div>
  <div class="dy-body">
    <div class="succes" v-if="eaccountData.resultFlag === '0'">
      <div class="img-box-success"></div>
      <div class="financial-buy-result" v-if="eaccountData.resultFlag === '1'">您已成功申请开通电子账户</div>
    </div>
    <div class="succes" v-else>
      <div class="img-box-failed"></div>
      <div class="financial-buy-result" v-if="eaccountData.resultFlag === '1'">申请开通电子账户失败</div>
    </div>
    <div class="financial-buy-result" v-show="eaccountData.resultFlag === '0'">
      <div class="financial-buy-result-detail">
        <div><div class="result-item-left">电子账户</div><div class="result-item-right">{{eaccountData.acctNo}}</div></div>
        <div><div class="result-item-left">账户类型</div><div class="result-item-right">{{eaccountData.acctType}}</div></div>
        <div><div class="result-item-left">绑定卡号</div><div class="result-item-right">{{eaccountData.cardNo}}</div></div>
      </div>
    </div>
    <div class="financial-result-button">
      <x-button class="subBtn" type="primary" action-type="button" @click.native="gotoHome">完成</x-button>
    </div>
  </div>
</div>
</template>

<script>

export default {
  data () {
    return {
      eaccountData: {
        acctNo: '',
        acctType: '',
        cardNo: ''
      }
    }
  },
  computed: {
    getEAccountInfoType () {
      return this.$store.getters.getEAccountInfoType
    }
  },
  mounted: function () {
    this.eaccountData.acctType = this.getEAccountInfoType
    this.eaccountData.acctNo = this.$route.query.acctNo
    this.eaccountData.cardNo = this.$route.query.cardNo
    this.eaccountData.resultFlag = this.$route.query.resultFlag
  },
  methods: {
    back () {
      this.$publicFun.goBack(this)
    },
    gotoHome: function () {
      this.$router.push({name: 'EAccountEnter'})
    }
  }
}
</script>

<style lang="less">
.EAccountOpenSucces {
  .succes {
    .img-box-success{
      width: 1.08rem;
      height: 1.08rem;
      margin-top: .8rem;
      margin-bottom: .52rem;
      margin-left: 50%;
      transform: translateX(-50%);
      background: url(../../../static/icon/success-arrow.svg) no-repeat left top;
      background-size: 100% 100%;
    }
    .img-box-failed{
      width: 1.08rem;
      height: 1.08rem;
      margin-top:.8rem;
      margin-bottom: .52rem;
      margin-left: 50%;
      transform: translateX(-50%);
      background: url(../../../static/icon/failed-arrow.svg) no-repeat left top;
      background-size: 100% 100%;
    }
  }
  .financial-buy-result{
    text-align: center;
    font-size: .3rem;
    .financial-buy-result-detail{
      font-size:.28rem;
      margin:.68rem .3rem 1.12rem .3rem;
      padding: 0.26rem .3rem;
      border-radius: .28rem;
      background: #fff;
    }
    .financial-buy-result-detail>div{
      padding: .14rem 0;
      .result-item-left{
        /* display:inline-block; */
        width:30%;
        float: left;
        color:rgba(153,153,153,1);
      }
      .result-item-right{
        display:inline-block;
        text-align: right;
        width:70%;
        color:rgba(51,51,51,1);
      }
    }
  }
  .financial-result-button{
    width: 3.4rem;
    height: .88rem;
    margin: 0 auto;
    line-height: .88rem;
    font-size: .34rem;
    color: #FFF;
    text-align: center;
  }
}
</style>
